<template>
  <div class="page-container">
    <div class="search">
      <div class="formBox">
        <el-form class="formClass" :label-width="$globalCss.formLabelWidth_default" label-position="top" ref="formSearch" :rules="rules"
            :model="formData" onsubmit="return false">
            <el-form-item :label="$t('label_operate_network')" prop="placeId">
              <ex_super_input v-model="formData.placeId" class="w_fill" type='select'
                url="/tms-api/base/TmsServiceOutletRpc/selectLikeServiceOutletLabel.json"
                :option="{ label: 'placeName', value: 'id' }" @initList="networkDefault" />
            </el-form-item>
            <el-form-item :label="$t('label_self_pickup_code_or_phone')" prop="totalWeight">
              <div class="flex_row_center">
                <ex_super_input v-model="formData.keyword" clearable class="w_fill" />
                <el-select style="margin-left: 10px; width: 300px;" @change="setTableData" v-if="mobileList&&mobileList.length>1" v-model="phoneNumber" placeholder="请选择">
                  <el-option v-for="(item,index) in mobileList" :key="item" :label="`${item.contactPhone}-${item.contactName}`" :value="item.contactPhone"></el-option>
                </el-select>
                <el-button class="mg_l2" type="primary" @click="getDataCode('other', formData.keyword)">{{
                  $t('label_query') }}</el-button>
              </div>
            </el-form-item>
            <el-form-item :label="$t('label_waybill_face')">
              <div class="flex_row_center">
                <el-input v-model.trim="formData.code" clearable class="form_input_default" ref="codeInput"
                  v-on:keyup.native="scanCodeKeyInput2" @blur="blurCodeInput"
                  style="flex: 1;" />
                <div>
                  <el-button class="mg_l2" type="primary" @click="getDataCode('trackNumber', formData.code)">{{
                    $t('label_scan') }}</el-button>
                  <el-checkbox class="mg_h2" @change="autoFocusSetChange" v-model="autoFocusSet" border>{{
                    $t('label_auto_focus') }}</el-checkbox>
                </div>
              </div>
            </el-form-item>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item :label="$t('label_consignee_person_name')">
                  <ex_super_input v-model="formData.receiptUserName" disabled class="w_fill" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="$t('label_consignee_person_phone')">
                  <ex_super_input v-model="phoneNumber" disabled class="w_fill" />
                </el-form-item>
              </el-col>
              <!-- <el-col :span="12">
                <el-form-item :label="$t('label_payment_method')">
                  <ex_super_input v-model="formData.payType" disabled class="w_fill" type="select"
                    enum="TmsOrderPayTypeEnum" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="$t('label_freight_cost')">
                  <ex_super_input v-model="formData.expressFee" disabled class="w_fill" />
                </el-form-item>
              </el-col> -->
            </el-row>


          </el-form>
      </div>
      <div class="statistics">
        <div class="count">
          {{ formTable.tableData.length }}
        </div>
        <div class="title">{{ $t('label_scan_count') }}</div>
      </div>
    </div>

    <div class="layout-bottom">
    <div class="btns">
      <el-button type="primary" @click="onSubmit('/tms-api/waybill/TmsExpressOperationRpc/express_self_pick.json',submitCallback)">{{
        $t('label_submit') }}</el-button>
      <el-button @click="downloadXlsx('label_receive')">{{ $t('label_export') }}</el-button>
      <el-button @click="deleteFn">{{ $t('label_delete') }}</el-button>
    </div>
    <el-form :model="formTable" ref="formTableRef" :rules="formTableRules" style="flex: 1;">
      <ex_super_table ref="MainTable" class="main-table" v-bind="tableOption" style="height:100%;"
      :cell-class-name="cellClassMethod" :data="formTable.tableData" :autoFlex="true" :autoPage="false"
        @selection-change="list => selection = list">
      </ex_super_table>
    </el-form>
  </div>
</div>
</template>
<script>
import expressOperate from '@/mixin/tms-express-operate.js'
export default {
  title: "label_self_pickup",
  mixins: [expressOperate],
  components: {  },
  data() {
    return {
      formData: {
        actionCode: 'EXPRESS_RECEIVE'
      },
      // 扫码查询接口地址
      scanPackageNoUrl: "",
      tableOption: {
        model: [
          // selectable:(row)=>row.status==='EXPRESS_WAIT_SELF_PICK'
          { type: 'selection', clickToggle: true, keyGroup: 'label_table_operate',},
          { key: 'transportNumber', label: 'label_waybill_code', 'min-width': 160, 'show-overflow-tooltip': true, },
          { key: 'receiptUserName', label: 'label_consignee_person_name', 'min-width': 120, 'show-overflow-tooltip': true, },
          { key: 'receiptContacts', label: 'label_consignee_person_phone', 'min-width': 120, 'show-overflow-tooltip': true, },
          { key: 'selfPickLocationCode', label: 'label_warehouse_location', 'min-width': 120, 'show-overflow-tooltip': true, },
          { key: 'selfPickCode', label: 'label_self_pickup_code', 'min-width': 120, 'show-overflow-tooltip': true, },
          { key: 'transportType', label: 'label_logistics_methods', 'min-width': 120, 'show-overflow-tooltip': true, formatter: (r, c, v, i) => this.$enumShow(v, "LogisticsProductsTypeEnum") },
          { key: 'payType', label: 'label_payment_method', 'min-width': 120, 'show-overflow-tooltip': true, formatter: (r, c, v, i) => this.$enumShow(v, "TmsOrderPayTypeEnum") },
          { key: 'orderAmount', label: 'label_freight_cost', 'min-width': 120, 'show-overflow-tooltip': true },
          // { key: 'scanTime', label: 'label_scan_time', 'min-width': 120, 'show-overflow-tooltip': true, formatter: (r, c, v) => this.$dateFormat(v) },
          // { key: 'currentUsername', label: 'label_operate_user', 'min-width': 120, 'show-overflow-tooltip': true },
          // { key: 'paymentRequired', label: 'label_payment_required', 'min-width': 120, 'show-overflow-tooltip': true, formatter: (r, c, v, i) => this.$enumShow(v, "YesOrNoEnum") },
          { key: 'status', label: 'label_status', 'min-width': 120, 'show-overflow-tooltip': true,formatter: (r, c, v, i) => this.$enumShow(v, "TmsWaybillStatusEnum") },
        ],
      },
      mobileList:[],
      phoneNumber:'',
      metadata:[],
      // 第二次查询
      secondQuery:{}
    };
  },
  methods: {
    cellClassMethod({ row, column, rowIndex, columnIndex }) {
      if (column.property == 'status') {
        if (row.status == 'EXPRESS_WAIT_SELF_PICK') {
          return 'color_success'
        }
      }

      if (column.property == 'paymentRequired') {
        if (row.paymentRequired == 'Y') {
          return 'color_danger'
        }
      }
      return ""
    },
    scanCodeKeyInput2(e) {
      if (e.code == "Enter" || e.key == "Enter") {
        if (this.autoFocusSet) {
          this.$refs.codeInput.select(this.formData.trackNumber)
        }
        this.getDataCode('trackNumber', this.formData.trackNumber)
      }
    },
    getDataCode(queryType,keyword) {
      this.$refs.formSearch.validate((valid) => {
        if (valid) {
          this.secondQuery = {queryType,keyword}
          if(!keyword) return
          this.$ajax({
            url: '/tms-api/waybill/TmsExpressQueryRpc/self_pick_order_query.json',
            method: 'post',
            type: 'form',
            data: {
              placeId: this.formData.placeId,
              keyword,
              queryType
            },
            success: async (res) => {
              if (res && res.data && res.data) {
                this.mobileList = res.data.contacts
                this.phoneNumber = this.mobileList?this.mobileList[0].contactPhone:''
                this.metadata = [
                  ...res.data.waiting,
                  ...res.data.finished
                ].map(item=>{
                  return {
                    ...item,
                    paymentRequired:item.payType==='RECEIVER_PAY'?'Y':'N'
                  }
                })
                this.setTableData()
              } else {
                this.$message.error(this.$t('tip_not_found_data'))
              }
            }
          })
        }
      })
    },
    setTableData(){
      if(this.phoneNumber){
        this.formTable.tableData = this.metadata.filter(item => item.receiptContacts === this.phoneNumber)
      }else{
        this.formTable.tableData = this.metadata
      }
      Object.assign(this.formData, this.formTable.tableData[0])
    },
    submitCallback(){
      this.getDataCode(this.secondQuery.queryType,this.secondQuery.keyword)
    }
  }

};

</script>
<style lang="less" scoped >
.page-container {
  background-color: #F7F8FA;
  box-shadow: none;
  padding: 0;
}

.search {
  display: flex;
  justify-content: space-between;

  .formBox {
    background-color: #fff;
    flex: 1;
    border-radius: 4px;
    padding-top: 12px;

    .formClass {
      width: 800px;
      margin-left: 20px;
    }
  }


  .statistics {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: #fff;
    margin-left: 8px;
    border-radius: 4px;
    width: 30%;

    .count {
      font-size: 80px;
      color: #F56C6C;
    }
  }
}


.btns {
  display: flex;
  justify-content: flex-end;
  padding-bottom: 10px;
}

.layout-bottom {
  margin-top: 8px;
  flex: 1;
  background-color: #fff;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  padding: 12px;
}
</style>
